<!-- 处方选择器 -->
<template>
  <div>
    <div class="disFlxAC">
      <el-select v-model="selectType" @change="handleChangeType" style="width: 110px;" class="borderRight0">
        <el-option label="平台处方"value="1"></el-option>
        <el-option label="模板处方"value="2"></el-option>
      </el-select>

      <el-select
        v-model="checkedId"
        v-loadMore="selectLoadMore"
        filterable
        remote
        placeholder="请选择处方,可输入处方名搜索选择"
        clearable
        @change="handleChangePrescript"
        :remote-method="remoteMethod"
        :loading="loading"
        style="flex: 1;"
        class="borderLeft0"
      >
        <el-option
          v-for="item in options"
          :key="selectType === '2' ? item.templateId : item.id"
          :label="selectType === '2' ? item.templateName : item.name"
          :value="selectType === '2' ? item.templateId : item.id"
        >
          <span style="float: left">{{
            selectType === "2" ? item.templateName : item.name
          }}</span>
          <div style="float: right">
            <el-tag size="mini" effect="plain" :class="{ 'mr-2': !!item.templateId }">
              <dict-tag
                :options="dict.type.tcm_prescript_type"
                :value="String(item.prescriptionType)"
              />
            </el-tag>
            <el-tag
              v-if="item.regionName"
              type="success"
              size="mini"
              effect="plain"
            >
              {{ item.regionName }}
            </el-tag>
          </div>
        </el-option>
      </el-select>
    </div>
    <el-descriptions
      v-for="info in [...prescriptItems, ...regionPrescriptItems]"
      :key="info.uuid"
      class="mt-10"
      :column="1"
      size="mini"
      border
    >
      <el-descriptions-item label="处方名称:" :labelStyle="{ width: '80px' }">
        <el-button type="danger" icon="el-icon-delete" size="mini" circle class="removeIcon" @click="removeItem(info.uuid)"></el-button>

        <span class="mr-10">{{
          info.templateId ? info.templateName : info.name
        }}</span>
        <el-tag
          size="mini"
          effect="plain"
          :class="{ 'mr-10': !!info.templateId }"
        >
          <dict-tag
            :options="dict.type.tcm_prescript_type"
            :value="String(info.prescriptionType)"
          />
        </el-tag>
        <el-tag
          v-if="info.templateId"
          type="success"
          size="mini"
          effect="plain"
        >
          {{ info.regionName }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="功效:" :labelStyle="{ width: '80px' }">
        {{ info.effect }}
      </el-descriptions-item>
      <el-descriptions-item label="主治:" :labelStyle="{ width: '80px' }">
        {{ info.mainTreat }}
      </el-descriptions-item>
      <el-descriptions-item
        v-if="!info.templateId"
        label="用法:"
        :labelStyle="{ width: '80px' }"
      >
        {{ info.usage }}
      </el-descriptions-item>
      <el-descriptions-item label="处方明细:" :labelStyle="{ width: '80px' }">
        <div
          v-for="(item, index) in info.materialsItems"
          :key="index"
          :class="{ 'mt-5': index !== 0, forBox: info.prescriptionType == 1 }"
        >
          <el-tag
            v-if="info.prescriptionType == 1"
            size="mini"
            effect="dark"
            class="mr-10"
          >
            贴{{ index + 1 }}
          </el-tag>
          <span
            v-for="(materials, materialsIndex) in item.materials"
            :key="materials.materialsId"
          >
            <span>{{ materials.materialsName }}</span>
            <span>{{ materials.dose }}</span>
            <span>{{ materials.unitName ? materials.unitName : findUnitName(materials.unitId) }}</span>
            <span class="pr-5">{{
              materialsIndex + 1 !== item.materials.length ? "," : ""
            }}</span>
          </span>
          <el-tag
            v-for="acupoints in item.acupoints"
            :key="acupoints.id"
            type="warning"
            size="mini"
            class="mr-1"
            effect="plain"
          >
            {{ acupoints.acupointName }}
          </el-tag>
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { getPrescriptList } from "@/api/saas/tcm.js";
import { getTemplateList } from '@/api/template/index.js'
import { arrayUnique } from '@/utils/ruoyi'
import { getUuid } from '@/utils/index.js'

export default {
  dicts: [
    "tcm_prescript_type"
  ],
  props: {
    // 计量单位数组
    unitList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectType: "1",
      checkedId: undefined, // 选中的ID
      prescriptItems: [], // 已选择处方列表
      regionPrescriptItems: [], // 已选择模板列表

      options: [],
      getParams: {
        pageNum: 1,
        pageSize: 10,
        searchValue: undefined,
      },
      total: 0,
      loading: false,
    };
  },
  async created() {
    await this.getList();
  },
  methods: {
    async getList() {
      // 只获取省区处方模版
      const { rows, total } = this.selectType === '2' ? await getTemplateList({ ...this.getParams, templateType: '1' }) : await getPrescriptList(this.getParams);
      this.total = total;
      if (this.getParams.pageNum === 1) { this.options = [] };
      this.options = this.selectType === '2' ? arrayUnique([...this.options, ...rows], 'templateId') : arrayUnique([...this.options, ...rows], 'id');
    },
    // 下拉加载更多
    selectLoadMore() {
      if (this.options.length < this.total) {
        this.getParams.pageNum++;
        this.getList();
      }
    },
    async remoteMethod(query) {
      this.loading = true;
      this.getParams.pageNum = 1;
      this.getParams.pageSize = 10;
      this.getParams.searchValue = query;
      await this.getList();
      this.loading = false;
    },
    findUnitName(unitId) {
      const item = this.unitList.find(v => v.unitId === unitId)
      return item ? item.unit : '项'
    },
    handleChangeType(e) {
      this.checkedId = undefined;
      this.remoteMethod('')
    },
    handleChangePrescript(id) {
      if (!id) return
      const that = this;
      const currentItem = that.options.find(v => {
        return that.selectType === '2' ? v.templateId === id : v.id === id;
      });
      that.checkedId = undefined;
      if (that.selectType === '2') {
        if(that.regionPrescriptItems.find(v=> v.templateId === currentItem.templateId)){
          that.$message.error(`${currentItem.templateName} 已经添加过,请勿重复添加`);
          return
        }
        that.regionPrescriptItems.push({ ...currentItem, uuid: getUuid(10) });
      } else {
        if(that.prescriptItems.find(v=> v.id === currentItem.id)){
          that.$message.error(`${currentItem.name} 已经添加过,请勿重复添加`);
          return
        }
        that.prescriptItems.push({ ...currentItem, uuid: getUuid(10) });
      }
    },
    removeItem(uuid){
      this.prescriptItems = this.prescriptItems.filter(v=> v.uuid !== uuid);
      this.regionPrescriptItems = this.regionPrescriptItems.filter(v=> v.uuid !== uuid);
    }
  },
};
</script>

<style lang="scss" scoped>
// 贴敷样式
.forBox {
  background-color: #f5f5f5;
  padding: 5px;
  border-radius: 5px;
  overflow: hidden;
  .forTag {
    margin: 2px;
  }
}
.removeIcon{
  position: absolute;
  left: -40px;
}
</style>
<style scoped>
.borderRight0 >>> .el-input__inner{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.borderLeft0 >>> .el-input__inner{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
</style>
